<template>
  <t-box>
    <div class="update-pwd" v-if="!isSuccess">
      <div class="tips t-flex t-col-center t-row-center">
        <i class="el-icon-s-promotion type-primary"></i>
        <p>为保证账户安全，请先进行验证</p>
      </div>
      <el-form
        ref="validatorCodeForm"
        :model="validatorCodeForm"
        :rules="validatorCodeRules"
        size="small"
        label-width="160px"
      >
        <el-form-item label="验证器6位验证码：" prop="validcode">
          <el-input
            v-model="validatorCodeForm.validcode"
            placeholder="请输入验证器6位验证码"
            clearable
          ></el-input>
        </el-form-item>
        <div class="t-m-t-40 t-flex t-row-center">
          <t-button size="small" type="primary" @click="validatorCode"
            >验证</t-button
          >
        </div>
      </el-form>
    </div>
    <div v-else class="update-pwd">
      <div class="tips t-flex t-col-center t-row-center">
        <i class="el-icon-success type-success"></i>
        <p>验证通过</p>
      </div>
      <el-form
        ref="validatorPwdForm"
        :model="validatorPwdForm"
        :rules="validatorPwdRules"
        size="small"
        label-width="120px"
      >
        <el-form-item label="新密码：" prop="pwd">
          <el-input
            v-model="validatorPwdForm.pwd"
            placeholder="请输入新密码"
            clearable
            :show-password="true"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="重复新密码：" prop="confirmPwd">
          <el-input
            v-model="validatorPwdForm.confirmPwd"
            placeholder="请输入重复新密码"
            clearable
            :show-password="true"
            type="password"
          ></el-input>
        </el-form-item>
        <div class="t-m-t-40 t-flex t-row-center">
          <t-button size="small" type="primary" @click="setPwd">确定</t-button>
        </div>
      </el-form>
    </div>
  </t-box>
</template>
<script>
import validator from "@/utils/validator.js";
export default {
  data() {
    return {
      validatorCodeForm: {
        validcode: "",
      },
      validatorCodeRules: {
        validcode: [
          { required: true, message: "请输入验证器6位验证码", trigger: "blur" },
          { validator: validator.code, trigger: "blur" },
        ],
      },
      validatorPwdForm: {
        pwd: "",
        confirmPwd: "",
      },
      validatorPwdRules: {
        pwd: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { validator: validator.pwd, trigger: "blur" },
        ],
        confirmPwd: [
          { required: true, message: "请输入重复新密码", trigger: "blur" },
          { validator: validator.pwd, trigger: "blur" },
        ],
      },
      validatorPwdForm: {},
      isSuccess: false,
    };
  },
  mounted() {},
  methods: {
    validatorCode() {
      this.$refs["validatorCodeForm"].validate((valid) => {
        if (valid) {
          this.$http
            .UserInfoValidUserCode(this.validatorCodeForm)
            .then((res) => {
              if (res.data.code == 0) {
                this.$message.success("验证通过");
                this.isSuccess = true;
              } else {
                this.$message.error(res.data.msg);
              }
            });
        }
      });
    },
    setPwd() {
      if (this.validatorPwdForm.pwd != this.validatorPwdForm.confirmPwd) {
        this.$message.error("请确认两次密码是否一致！");
        return;
      }
      console.log("sadsadasd");
      this.$refs["validatorPwdForm"].validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.validatorPwdForm));
          form.pwd = this.$md5(form.pwd);
          this.$http.UserInfoModifyPassword(form.pwd).then((res) => {
            if (res.data.code === 0) {
              this.$message.success("修改成功");
              this.$router.push("/login");
              this.$store.dispatch("handleLogOut");
              this.$store.dispatch("deleteAdminAllPageTag");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.t-box-content {
  display: flex;
  justify-content: center;
}
/deep/.el-button {
  padding: 7px 30px;
}
.update-pwd {
  width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .tips {
    padding: 40px 0;
    p {
      font-size: 16px;
      font-weight: bold;
      padding-left: 10px;
    }
    .el-icon-s-promotion,
    .el-icon-success {
      font-size: 50px;
    }
  }
}
</style>